<template>
	<div id="war">
		<el-row>
			<hr style="height:1px;border:none;border-top:1px solid #555555; margin-bottom: 10px;" />
			<div id="top">
				<div id="top-left12">
					<el-button type="info" icon="el-icon-plus" size="small" @click="addwarehouse">新增</el-button>
				</div>
				<div id="top-left12">
					<el-button type="info" icon="el-icon-search" size="small">查看</el-button>
				</div>
				<div id="top-left12">
					<el-button type="info" icon="el-icon-video-pause" size="small">停用</el-button>
				</div>
				<div id="top-left12">
					<el-button type="info" icon="el-icon-refresh" size="small" @click="winReload">刷新</el-button>
				</div>
				<div id="top-left12">
					<el-dropdown>
						<el-button type="info" size="small">
							<i class="el-icon--left el-icon-more"></i>更多
						</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>输出execl表</el-dropdown-item>
							<el-dropdown-item>输出pdf</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>
		</el-row>
		<el-row>
			<div id="head-left1">
				仓库类型
				<el-select v-model="picktype" placeholder="请选择" clearable @change="getkind">
					<el-option v-for="item in waretype" :key="item.wtId" :label="item.wtName" :value="item.wtName" ></el-option>
				</el-select>
			</div>
		</el-row>
		<el-row>
			<div align="center">
				<el-table :data="tableData.filter(data => !search || data.warName.toLowerCase().includes(search.toLowerCase()))"
				 style="width: 98%" height="600">
					<el-table-column fixed label="状态" prop="warStatic" width="110"></el-table-column>
					<el-table-column fixed label="仓库编号" prop="warId" width="140"></el-table-column>
					<el-table-column fixed label="仓库名称" prop="warName" width="160"></el-table-column>
					<el-table-column label="仓库地址" prop="warAddress" width="240"></el-table-column>
					<el-table-column label="所在地区" prop="warArea" width="160"></el-table-column>
					<el-table-column label="仓库类型" prop="warKind" width="160"></el-table-column>
					<el-table-column label="负责人" prop="warAdmin" width="160"></el-table-column>
					<el-table-column label="联系方式" prop="warTel" width="160"></el-table-column>
					<el-table-column label="备注" prop="warNote" width="180"></el-table-column>
					<el-table-column align="right" width="160">
						<template sl ot="header" slot-scope="scope">
							<el-input v-model="search" size="mini" placeholder="仓库搜索" />
						</template>
						<template slot-scope="scope">
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修 改</el-button>
							<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-dialog title="新增仓库" :visible.sync="dialogFormVisible">
				<el-form :model="form" label-width="100px" :rules="rules">
					<el-form-item label="仓库名称">
						<el-input v-model="form.warName" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="仓库地址">
						<el-input v-model="form.warAddress" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="仓库区域">
						<el-input v-model="form.warArea" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="仓库类型">
						<el-select v-model="form.warKind" placeholder="请选择">
							<el-option v-for="item in waretype" :key="item.wtId" :label="item.wtName" :value="item.wtName"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="负责人">
						<el-input v-model="form.warAdmin" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="联系方式">
						<el-input v-model="form.warTel" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input type="textarea" :rows="3" v-model="form.warNote" autocomplete="off" placeholder="请输入内容"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer" style="height: 50px;">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button v-show="!isedit" type="primary" @click="sureAddWarehouse" :disabled="disable3">确 定</el-button>
					<!-- <el-button v-show="isedit" type="primary" @click="sureUpdate">修 改</el-button> -->
				</div>
			</el-dialog>

			<el-dialog title="修改仓库" :visible.sync="dialogFormVisible1">
				<el-form :model="form" label-width="100px" :rules="rules">
					<el-form-item label="仓库名称">
						<el-input v-model="form.warName" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="仓库地址">
						<el-input v-model="form.warAddress" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="仓库区域">
						<el-input v-model="form.warArea" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="仓库类型">
						<el-select v-model="form.warKind" placeholder="请选择">
							<el-option v-for="item in waretype" :key="item.wtId" :label="item.wtName" :value="item.wtName"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="负责人">
						<el-input v-model="form.warAdmin" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="联系方式">
						<el-input v-model="form.warTel" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input type="textarea" :rows="3" v-model="form.warNote" autocomplete="off" placeholder="请输入内容"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer" style="height: 50px;">
					<el-button @click="dialogFormVisible1 = false">取 消</el-button>
					<el-button v-show="isedit" type="primary" @click="sureUpdate">修 改</el-button>
				</div>
			</el-dialog>
		</el-row>
		<el-row>
			<div align="center" style="margin-top: 20px;">
				<el-pagination background layout="prev, pager, next" :total="200"></el-pagination>
			</div>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				rules: {
					war_name: [{
						required: true,
						message: '请输入仓库名称',
						trigger: "blur"
					}, ]
				},
				//仓库表
				tableData: [],
				//仓库类型选择
				waretype: [],
				value: '',
				picktype: '',
				search: '',
				dialogTableVisible: false,
				dialogFormVisible: false,
				dialogFormVisible1: false,
				form: {
					warId: '',
					warName: '',
					warAddress: '',
					warArea: '',
					warKind: '',
					warStatic: '',
					warAdmin: '',
					warTel: '',
					warNote: ''
				},
				//选择种类
				types: [],
				disable3: false,
				isedit: false,
				myindex: -1,
			}
		},
		mounted() {
			var _this = this;
			this.$axios.post("findwarehouse?warKind=" + this.value + "").then(res => {
				if (res.data) {
					_this.tableData = res.data.warehouse;
					_this.waretype = res.data.waretype;
				} else {
					alert("出错了！！");
				}

			}).catch(ex => {
				alert("出错了8888");
			})
		},
		methods: {
			//修改
			handleEdit(index, row) {
				this.isedit = true;
				this.dialogFormVisible1 = true;
				this.form = {
					warId: row.warId,
					warName: row.warName,
					warAddress: row.warAddress,
					warArea: row.warArea,
					warKind: row.warKind,
					warAdmin: row.warAdmin,
					warTel: row.warTel,
					warNote: row.warNote
				};
				this.myindex = index;
			},
			//确认修改
			sureUpdate: function() {
				this.$axios.post("updatewarehouse", this.form).then(v => {
					console.log(v)
					if (v.data) {
						alert("修改成功！！")
					} else {
						alert("出错了！！");
					}
				}).catch(ex => {
					alert("出错了！" + ex);
				})
				//根据form.id确认要修改的webs的id值
				this.tableData.splice(this.myindex, 1, this.form);
				//确认修改
				this.dialogFormVisible1 = false;
				this.isedit = false; //修改状态结束
			},
			//删除
			handleDelete(index, row) {
				 var _this = this;
				this.$confirm(
					"你确定要删除该数据吗？",
					"温馨提示", {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}
				).then(() => {
					_this.$message({
						type: "success",
						message: "删除成功"
					}); 
					
					this.$axios.post("delwarehouse?warId=" + row.warId + "").then(v => {
						console.log(v)
						if (v.data) {
							alert("删除部门成功！！");
						} else {
							alert("出错了！！");
						}
					}).catch(ex => {
						alert("出错了！" + ex);
					})
					//index是索引，id是数据key值
					_this.tableData.splice(index, 1);
				 }).catch(() => {
					_this.$message({
						type: "info",
						message: "你已经取消"
					});
				})
 
			},
			add() {
				this.dialogFormVisible = true;
			},
			//刷新方法
			winReload: function(cond) {
				this.$router.go(0);
			},

			addwarehouse() {
				this.form = {
					warId: '',
					warName: '',
					warAddress: '',
					warArea: '',
					warKind: '',
					warStatic: '',
					warAdmin: '',
					warTel: '',
					warNote: ''
				}
				this.dialogFormVisible = true;
			},
			sureAddWarehouse() {
				//确认添加
				this.$axios.post("addwarehouse", this.form).then(v => {
					console.log(v)
					if (v.data) {
						alert("新增部门成功！！");
						this.$router.push("/warehouse");
					} else {
						alert("出错了！！");
					}
				}).catch(ex => {
					alert("出错了！" + ex);
				})
				this.dialogFormVisible = false;
				this.tableData.push(this.form);
			},
			getkind: function(){
				alert("选择了"+this.picktype);
				var _this = this;
				this.$axios.post("findwarehouse?warKind=" + this.picktype + "").then(res => {
					if (res.data) {
						_this.tableData = res.data.warehouse;
						_this.waretype = res.data.waretype;
					} else {
						alert("出错了！！");
					}
				
				}).catch(ex => {
					alert("出错了8888");
				})
			}
		}
	}
</script>

<style>
	#war {
		margin: 5px 15px 5px 15px;
	}

	#top {
		width: 100%;
		height: 50px;
		border: 1px solid #FF0000;
	}

	#head-left1 {
		margin: 10px 5px 8px 10px;
		float: left;
	}

	#head-left2 {
		width: 100px;
		height: 100px;
		float: left;
	}

	#head-left3 {
		float: left;
	}

	#top-left12 {
		width: 50px;
		margin-top: 7px;
		margin-left: 40px;
		float: left;
	}

	.el-table {}
</style>
